import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import Nav from "@pages/nav";
import PortalContainer from "@components/portalContainer";
import profile from "@depjs/profile";
import toast from "@utils/showToast";
import { connect } from "react-redux";
import { payAction } from "@redux/actions";

const amountArr = [6, 18, 68, 233, 648, 998, 2333, 9999];

const Pay = (props) => {
    const { payAction } = props;

    const [userName, setUserName] = useState("");
    const [username, setUsername] = useState("");
    const [payAmount, setPayAmount] = useState("");
    const [payChannel, setPayChannel] = useState("");
    const [isAgree, setIsAgree] = useState(false);

    const handleRecharge = (isAgree, username, payAmount, payChannel) => {
        if (!isAgree) {
            toast.fail("先阅读并同意协议再充值");
            return;
        }
        if (!username) {
            toast.info("给谁充值呀？");
            return;
        }
        if (!payAmount) {
            toast.info("充值多少呀？");
            return;
        }
        if (!payChannel) {
            toast.info("alipay Or wechat ?");
            return;
        }
        payAction(username, payAmount, payChannel);
    };

    useEffect(() => {
        profile.ready(() => {
            setUserName(profile.userName);
        });
    }, []);

    return (
        <div className={styles.pay}>
            <Nav />
            <div className={styles.pay_main}>
                <label htmlFor="userName">
                    充值账号：
                    <input
                        type="text"
                        name="userName"
                        id="userName"
                        className={styles.user_name}
                        autoComplete="off"
                        value={username}
                        onChange={(e) => {
                            setUsername(e.target.value);
                        }}
                    />
                    <span
                        className={styles.pay_to}
                        onClick={() => {
                            setUsername(userName);
                        }}
                    >
                        给自己充
                    </span>
                    <span
                        className={styles.pay_to}
                        onClick={() => {
                            setUsername("");
                        }}
                    >
                        给好友充
                    </span>
                </label>
                <div className={styles.pay_amount}>
                    {amountArr.map((item, index) => {
                        return (
                            <div
                                key={index}
                                className={`${styles.amount_cont1} ${
                                    amountArr.indexOf(payAmount) === index
                                        ? styles.active
                                        : ""
                                }`}
                                onClick={() => {
                                    setPayAmount(item);
                                }}
                            >
                                <div className={styles.up}>
                                    <p className={styles.up1}>{item}</p>
                                    <p className={styles.up2}>G币</p>
                                </div>
                                <p className={styles.down}>¥ {item}.00</p>
                            </div>
                        );
                    })}
                </div>
                <div className={styles.recharge_channel}>
                    <p className={styles.p1}>选择支付方式：</p>
                    <div className={styles.channel_main}>
                        <div
                            className={`${styles.channel} ${styles.channel1} ${
                                payChannel === "alipay" ? styles.active : ""
                            }`}
                            onClick={() => {
                                setPayChannel("alipay");
                            }}
                        ></div>
                        <div
                            className={`${styles.channel} ${styles.channel2} ${
                                payChannel === "wechat" ? styles.active : ""
                            }`}
                            onClick={() => {
                                setPayChannel("wechat");
                            }}
                        ></div>
                    </div>
                </div>
                <label htmlFor="agree" className={styles.agree}>
                    <input
                        type="checkbox"
                        checked={isAgree}
                        onChange={() => {
                            setIsAgree(!isAgree);
                        }}
                    />
                    <span>
                        我已阅读并同意
                        <a href="https://www.bilibili.com/blackboard/activity-jKpCkxZTP3.html">
                            《G币用户协议》
                        </a>
                    </span>
                </label>
                <br />
                <input
                    type="button"
                    value="前往收银台"
                    className={styles.recharge}
                    onClick={() => {
                        handleRecharge(
                            isAgree,
                            username,
                            payAmount,
                            payChannel
                        );
                    }}
                />
            </div>
            <PortalContainer />
        </div>
    );
};

export default connect((state) => ({ isPay: state.paymentReducer }), {
    payAction,
})(Pay);
